import ReactDOM from 'react-dom'
import { useState, useEffect } from 'react'

// 这里主要是展示setState的第二种写法
const App = () => {
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')
  // 推荐使用第二种写法的情况
  // 这种情况下开启的定时器会在每次组件更新后，先清理掉上一次生成的定时器
  // 然后再重新开启新的定时器
  // 实际上没有必要重复开启定时器
  // 实际上这种方式并不好，问题就出在这个依赖项上
  // 因为有依赖，所以每次定时器运行都会修改数据，组件更新
  // 导致整个组件重新渲染，然后又要重新生成计时器，清除计时器
  // 最理想的就是依赖项为空，但是会提示应该添加一个依赖项
  // useEffect(() => {
  //   console.log('effect run')
  //   let timerId = window.setInterval(() => {
  //     setCount(count + 1)
  //   }, 1000)
  //   // 清理函数，此时用来清理定时器
  //   return () => {
  //     console.log('clear effect')
  //     clearInterval(timerId)
  //   }
  // }, [count])

  // 采用新的方式来使用
  // 这个时候，整个effect函数就没有依赖外部变量，也就不会报错没写依赖项了
  useEffect(() => {
    console.log('effect run')
    let timerId = window.setInterval(() => {
      setCount(prev => prev + 1)
    }, 1000)
    // 清理函数，此时用来清理定时器
    return () => {
      console.log('clear effect')
      clearInterval(timerId)
    }
  }, [])

  const handClick = () => {
    // setCount(count + 1)
    // 使用第二种调用方式
    // setCount(prev => prev + 1)
    setCount(prev => prev + 10)
  }

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>
      <h1>计数器：{count}</h1>
      <button onClick={handClick}>+10</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
